<template>
	<view class="container">
		<view class="header">
			<text class="title">社区医疗</text>
			<view class="user-info" v-if="userInfo">
				<text class="welcome">欢迎，{{ userInfo.name }}</text>
				<button class="logout-btn" @click="handleLogout">退出登录</button>
			</view>
		</view>
		
		<view class="content">
			<text class="subtitle">功能菜单</text>
			<view class="menu-grid">
				<view class="menu-item" @click="navigateTo('/pages/health/health')">
					<text class="menu-text">健康管理</text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/appointment/appointment')">
					<text class="menu-text">预约挂号</text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/consultation/consultation')">
					<text class="menu-text">在线咨询</text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/profile/profile')">
					<text class="menu-text">个人中心</text>
				</view>
			</view>
		</view>
		
		<view class="token-info" v-if="showTokenInfo">
			<text class="token-title">Token信息（调试用）</text>
			<text class="token-text">{{ token ? 'Token已保存' : 'Token未保存' }}</text>
			<button class="test-btn" @click="testToken">测试Token</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { getToken, getUserInfo, clearLoginInfo, requestWithToken } from '../../utils/auth.js'
	declare const uni : any;

	const userInfo = ref(null)
	const token = ref('')
	const showTokenInfo = ref(false) // 开发时设为true，生产时设为false

	onMounted(() => {
		loadUserData()
	})

	function loadUserData() {
		// 获取token
		token.value = getToken()
		
		// 获取用户信息
		userInfo.value = getUserInfo()
		
		// 如果没有token，跳转到登录页
		if (!token.value) {
			uni.navigateTo({
				url: '/pages/Login/Login'
			})
		}
	}

	function handleLogout() {
		uni.showModal({
			title: '确认退出',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					clearLoginInfo()
					uni.navigateTo({
						url: '/pages/Login/Login'
					})
				}
			}
		})
	}

	function navigateTo(url: string) {
		uni.navigateTo({
			url: url
		})
	}

	function testToken() {
		// 测试token是否有效
		requestWithToken({
			url: 'http://localhost:3010/user/profile',
			method: 'GET',
			success: (res) => {
				console.log('Token测试结果:', res)
				if (res.data.code === 200) {
					uni.showToast({ title: 'Token有效', icon: 'success' })
				} else {
					uni.showToast({ title: 'Token无效', icon: 'none' })
				}
			},
			fail: (err) => {
				console.error('Token测试失败:', err)
				uni.showToast({ title: 'Token测试失败', icon: 'none' })
			}
		})
	}
</script>

<style scoped>
	.container {
		padding: 40rpx;
		background: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 60rpx;
	}

	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
	}

	.user-info {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.welcome {
		font-size: 28rpx;
		color: #666;
	}

	.logout-btn {
		background: #ff4757;
		color: white;
		font-size: 24rpx;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		border: none;
	}

	.content {
		background: white;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 40rpx;
	}

	.subtitle {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 40rpx;
		display: block;
	}

	.menu-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30rpx;
	}

	.menu-item {
		background: #f8f9fa;
		border: 2rpx solid #e9ecef;
		border-radius: 16rpx;
		padding: 40rpx;
		text-align: center;
		transition: all 0.3s;
	}

	.menu-item:active {
		background: #e9ecef;
		transform: scale(0.98);
	}

	.menu-text {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	.token-info {
		background: white;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-top: 40rpx;
	}

	.token-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.token-text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
		display: block;
	}

	.test-btn {
		background: #007bff;
		color: white;
		font-size: 28rpx;
		padding: 20rpx 40rpx;
		border-radius: 12rpx;
		border: none;
	}
</style>